import styles from "../../index.module.less";
import { Avatar, Space } from "antd";
import { UserOutlined, ArrowLeftOutlined } from "@ant-design/icons";
import { useSelector } from "@/store/hooks";
import { useState, useEffect } from "react";
import dayjs from "dayjs";
import useUrl from "@/hooks/useUrl";

interface Props {
    type: 'detail' | 'main'
}

export default (props: Props) => {
    const { type } = props;
    const { currentUser } = useSelector(state => state.auth);
    const { navigate } = useUrl();
    const [currentTime, setCurrentTime] = useState(dayjs());

    // 更新时间每秒钟
    useEffect(() => {
        const timer = setInterval(() => {
            setCurrentTime(dayjs());
        }, 1000);

        // 清除定时器
        return () => clearInterval(timer);
    }, []);

    const handleBackPrev = () => {
        // 返回路由前一页
        navigate(-1);
    }

    return (
        <div className={styles.header}>
			<div className={styles.title} onClick={handleBackPrev}>
				大成运和智慧调度监控大屏
			</div>
            {/* type === "detail" &&  */}
			{(
				<div className={styles.left}>
					<div className={styles.backBox} onClick={handleBackPrev}>
						<ArrowLeftOutlined />
						<span>返回</span>
					</div>
				</div>
			)}
            <div className={styles.right}>
                <div className={styles.time}>
                    <div className={styles.date}>{currentTime.format("YYYY-MM-DD")}</div>
                    <div className={styles.hour}>{currentTime.format("HH:mm:ss")}</div>
                </div>
                <div className={styles.user}>
                    <Avatar size="large" icon={<UserOutlined />} style={{ backgroundColor: '#939393' }} />
                    <span>{currentUser?.userName}</span>
                </div>
            </div>
        </div>
    )
}
